<template>
	<div class="patch">
		<div class="icon-box"><Icon :type="item.type"/></div>
		<div class="content-box">
			<div class="patch-title">{{item.title}}</div>
			<div class="patch-value">{{item.value}}</div>
		</div>
	</div>
</template>

<script>
export default{
	props:{
		item:{
			type: Object,
			default: () => ({
				title: 'patch-title',
				value: 0
			})
		}
	}
}
</script>

<style lang="less" scoped>
// 6vh
.patch{
	position: relative;
	display: flex;
	flex: 1 1 1;
	margin-left: 1vw;
	width: calc(147 / 67 * 10vh);
	height: 100%;
	box-sizing: border-box;
	background: url(../../assets/images/bg/patch.png) no-repeat;
	background-size: auto 100%;
	z-index: 10;
	color: #fff;
	.icon-box{
		width: 10vh;
		text-align: center;
		font-size: 6vh;
	}
	.content-box{
		padding: 2vh 0;
		width: calc(100% - 10vh);
		text-align: center;
		.patch-title{
			line-height: 3.6vh;
			font-size: 2.1vh;
			white-space: nowrap;
		}
		.patch-value{
			line-height: 2.2vh;
			font-size: 2vh;
			white-space: nowrap;
		}
	}
}
</style>
